<template>
  <div class="template-list">
    <div
      style="
        display: flex;
        justify-content: center;
        border-bottom: 1px #f0f0f0 solid;
        padding-bottom: 10px;
      "
    >
      <div style="width: 160px"></div>
      <div style="width: 160px; padding-left: 30px">名称</div>
      <div style="width: 160px; text-align: right">报价模式</div>
      <div style="width: 160px; text-align: right; color: #1890ff; position: relative; left: 35px">
        操作
      </div>
    </div>

    <ul class="content">
      <li
        v-for="(item, index) in listCopy"
        :key="index"
        class="item"
        :class="{ active: item.status }"
      >
        <div class="checkbox">
          <a-checkbox
            v-model:checked="item.status"
            id=""
            @change="checkboxChange(item)"
          ></a-checkbox>
        </div>

        <div style="display: flex; align-items: center; width: 140px">
          <a-tooltip placement="top" v-if="!item.isRemarkShow">
            <template #title>
              <span>{{ item.name }}</span>
            </template>
            <div class="hiddenText">{{ item.name }}</div>
          </a-tooltip>

          <a-input
            v-model:value="item.name"
            style="border: 0"
            @blur="handleRemark(item, index)"
            v-else
          />

          <EditOutlined
            style="margin-left: 6px; color: #1890ff"
            v-if="!item.isRemarkShow"
            @click="EditRemarkSet(item)"
          />
        </div>

        <!-- <div class="id">{{ item.id }}</div> -->
        <div class="type">{{ item.type == 1 ? '简易报价模式' : '专业报价模式' }}</div>
        <a @click="del(item)">删除</a>
      </li>
    </ul>

    <div class="btn">
      <a-button type="primary" block ghost @click="add">
        <template #icon>
          <PlusOutlined />
        </template>
        添加
      </a-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue'
import * as tempalteApi from '@/api/template.ts'
import { message } from 'ant-design-vue'

const emit = defineEmits(['sendId'])

const sendTheId = id => {
  emit('sendId', id)
}

const props = defineProps({
  list: Array,
  templateType: String,
})

const { list, templateType } = toRefs(props)

let listCopy = ref([])
watch(templateType.value, (newValue, oldValue) => {
  console.log('templateType.value=', templateType.value)
  getList()
})
onMounted(() => {
  getList()
})

// onUpdated(() => {
//   getList()
// })

const add = async () => {
  if (listCopy.value.length < 5) {
    listCopy.value.push({
      name: '默认名称',
      type: templateType.value,
      isRemarkShow: false,
      status: false,
    })

    try {
      let {
        state,
        data,
        message: msg,
      } = await tempalteApi.addTemplate(listCopy.value[listCopy.value.length - 1])
      if (state === 200) {
        getList()
      } else {
        message.error(msg)
      }
    } catch (error) {
      message.error('网络请求连接失败~')
    }
  } else {
    message.warning('最多只能添加5个模板~')
  }
}

// 模板列表
const getList = async () => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await tempalteApi.getSimpleTemplateList({ type: templateType.value })
    if (state === 200) {
      listCopy.value = data.map(item => {
        item.isRemarkShow = false
        item.status = false

        return item
      })

      console.log('getList-listCopy=', listCopy.value)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求发送失败1~')
  }
}

const del = async item => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await tempalteApi.deleteTemplate({ type: templateType.value, id: item.id })
    if (state === 200) {
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求发送失败1~')
  }
}

const EditRemarkSet = async item => {
  item.isRemarkShow = true
}

const handleRemark = async (item, index) => {
  item.isRemarkShow = false

  try {
    let {
      state,
      data,
      message: msg,
    } = await tempalteApi.EditTemplate({
      name: item.name,
      id: item.id,
    })
    if (state === 200) {
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }

  console.log('listCopy=', listCopy.value)
}

const checkboxChange = item => {
  console.log('item', item)
  localStorage.setItem('checkbox-templateId', item.id)

  if (item.status) {
    sendTheId(item.id)
  }
}

defineExpose({
  getList,
})
</script>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
  // background-color: aqua;
}

.template-list {
  .content {
    text-align: center;

    width: 100%;
    li:nth-child(n + 2) {
      margin-top: 5px;
    }
    li {
      list-style: none; /* 简写形式 */
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      // background-color: blue;
      background: rgba(255, 255, 255, alpha);
      padding: 20px;
      box-sizing: border-box;
    }
    .active {
      background: rgba(186, 224, 255, 0.2);
    }
  }
  .btn {
    margin-top: 20px;
    text-align: center;
    padding: 0 80px;
  }
}
</style>
